{include file="public/header" /}
<body>
<div class="header">
    <i class="layui-icon layui-icon-left"></i> 账户充值
    <a href="{:url('remit/record')}">充值记录</a>
</div>

<div class="recharge-price">
    <img src="/static/index/img/icon21.png" alt="">
    <div>
        <p>账户余额</p>
        <p class="num">￥<span>{$user.assets.currency}</span></p>
    </div>
</div>

<div class="recharge-title">支付方式</div>

<ul class="recharge-nav flex-layout">
    <li class="active" data-type="支付宝">
        <p class="flex-center">
            <img src="/static/index/img/icon4.png" alt="">
        </p>
        <p>支付宝支付</p>
        <img src="/static/index/img/icon22.png" alt="" class="img">
    </li>
    <li data-type="微信">
        <p class="flex-center">
            <img src="/static/index/img/icon3.png" alt="">
        </p>
        <p>微信支付</p>
        <img src="/static/index/img/icon22.png" alt="" class="check-img img">
    </li>
    <li data-type="银行卡">
        <p class="flex-center">
            <img src="/static/index/img/icon17.png" alt="">
        </p>
        <p>银行卡支付</p>
        <img src="/static/index/img/icon22.png" alt="" class="check-img img">
    </li>
</ul>

<div class="recharge-imgs alipay flex-center">
    <p class="flex-center">
        <img class="images" src="{:cache('system')['remit_alipay']}" alt="">
    </p>
    <p>请扫码支付</p>
</div>

<div class="recharge-imgs wechat flex-center" style="display: none">
    <p class="flex-center">
        <img class="images" src="{:cache('system')['remit_wechat']}" alt="">
    </p>
    <p>请扫码支付</p>
</div>

<div class="recharge-bank">
    <p><span>
            <span class="copy_content">{:cache('system')['remit_bank_number']}</span>
            <span class="copy" data-clipboard-action="copy" data-clipboard-target=".copy_content"
                  style="color: red">复制</span>
        </span></p>
    <div>
        <p class="flex-center">
            <img src="/static/index/img/icon17.png" alt="">
        </p>{:cache('system')['remit_bank_name']} | {:cache('system')['remit_bank_account']}
    </div>
</div>
<form action="{:url('remit/save')}" method="post" class="form layui-form">
    <input type="hidden" value="支付宝" id="pay_way" name="pay_way"/>
    <ul class="recharge-acc-list">
        <li>
            <p>充值金额</p>
            <div>￥
                <input type="text" lay-verify="required" lay-reqtext="请填写充值金额" lay-verType="tips"
                       name="amount" placeholder="请填写充值金额，{:cache('system')['remit_min']}起充" autocomplete="off"
                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
            </div>
        </li>
        <li>
            <p>打款截图</p>
            <label id="uploads_image">
                <img src="/static/index/img/icon15.png" alt="" id="image_show">
            </label>
            <input type="hidden" name="images" id="images_value" value="" lay-verify="required"
                   lay-reqtext="请上传支付凭证"
                   placeholder="请上传支付凭证"/>
        </li>
    </ul>

    <p class="save upd-save" lay-submit lay-filter="save" formObj=".form">立即充值</p>
</form>

<img alt="" style="display:none;width: 100%;height: auto" id="displayimg" src=""/>
</body>
{include file="public/footer"/}
<script src="/static/index/js/clipboard.min.js"></script>
<script>
    $('.images').click(function () {
        DataHtml('收款码', $(this).attr('src'))
    });
    $('.copy').click(function () {
        var clipboard = new ClipboardJS('.copy');
        layer.msg('已复制');
    })
    $('.recharge-nav li').click(function (e) {
        if (e.currentTarget.dataset.type == '银行卡') {
            $('.recharge-bank').show()
            $('.alipay').hide()
            $('.wechat').hide()
        } else if (e.currentTarget.dataset.type == '支付宝') {
            $('.alipay').show()
            $('.wechat').hide()
            $('.recharge-bank').hide()
        } else {
            $('.alipay').hide()
            $('.wechat').show()
            $('.recharge-bank').hide();
        }
        $("#pay_way").val(e.currentTarget.dataset.type);
        $(this).addClass('active').siblings().removeClass('active')
        $(this).find('.img').show().parent().siblings().find('.img').hide()
    })

    function DataHtml(name, url) {
        $("#displayimg").attr("src", url);
        var height = $("#displayimg").height();
        var width = $("#displayimg").width();
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            area: [width + 'px', 'auto'], //宽高
            content: "<img style='width: 100%' alt=" + name + " title=" + name + " src=" + url + " />"
        });
    }
</script>
</html>